<template>
  <div class="login-history-page">
    <ResponsiveNav />

    <div class="page-content">
      <!-- 面包屑导航 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/account/security' }">
              <i class="fas fa-chevron-left"></i> {{ $t('返回登录与安全') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('登录历史') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="main-card">
        <h1 class="page-title">{{ $t('登录历史') }}</h1>

        <!-- 筛选器 -->
        <div class="filter-bar">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            :range-separator="$t('至')"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
            :shortcuts="dateShortcuts"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
        </div>

        <!-- 登录记录列表 -->
        <div class="history-list">
          <div
            v-for="item in loginHistory"
            :key="item.id"
            class="history-item"
          >
            <div class="status-icon" :class="{ success: item.status === 'success' }">
              <i :class="item.status === 'success' ? 'fas fa-check' : 'fas fa-times'"></i>
            </div>
            <div class="history-info">
              <div class="main-info">
                <span class="time">{{ item.time }}</span>
                <span
                  class="status-text"
                  :class="{ success: item.status === 'success' }"
                >
                  {{ item.status === 'success' ? $t('登录成功') : $t('登录失败') }}
                </span>
              </div>
              <div class="details">
                <span class="detail-item">
                  <i class="fas fa-globe"></i>
                  {{ item.location }}
                </span>
                <span class="detail-item">
                  <i class="fas fa-laptop"></i>
                  {{ item.device }}
                </span>
                <span class="detail-item">
                  <i class="fas fa-browser"></i>
                  {{ item.browser }}
                </span>
                <span class="detail-item">
                  <i class="fas fa-map-marker-alt"></i>
                  {{ item.ip }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页器 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import Footer from '@/components/Footer.vue'
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const router = useRouter()

// 日期筛选
const dateRange = ref([])
const dateShortcuts = [
  {
    text: t('最近一周'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: t('最近一个月'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: t('最近三个月'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 模拟数据
const loginHistory = ref([
  {
    id: 1,
    time: '2024-01-20 14:30:25',
    status: 'success',
    location: '中国 广东 深圳',
    device: 'Windows 10',
    browser: 'Chrome 120.0.0',
    ip: '192.168.1.1'
  },
  {
    id: 2,
    time: '2024-01-19 09:15:10',
    status: 'failed',
    location: '中国 广东 广州',
    device: 'iOS 17.2',
    browser: 'Safari 17.2',
    ip: '192.168.1.2'
  }
  // ... 更多记录
])

// 处理函数
const handleDateChange = (val: any) => {
  // TODO: 根据日期筛选记录
  console.log('日期范围:', val)
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}
</script>

<style lang="scss" scoped>
.login-history-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  padding: 32px 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.page-nav {
  margin-bottom: 24px;

  .breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565656;
        font-weight: normal;
        font-size: 14px;

        &:hover {
          color: #c45500;
        }

        i {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

.page-title {
  font-size: 24px;
  color: #111;
  font-weight: 500;
  margin-bottom: 32px;
}

.filter-bar {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
}

.history-list {
  .history-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .status-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #ff4d4f;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      &.success {
        background: #52c41a;
      }

      i {
        font-size: 14px;
      }
    }

    .history-info {
      flex: 1;

      .main-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        .time {
          font-size: 15px;
          color: #333;
        }

        .status-text {
          font-size: 14px;
          color: #ff4d4f;

          &.success {
            color: #52c41a;
          }
        }
      }

      .details {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        .detail-item {
          font-size: 13px;
          color: #666;
          display: flex;
          align-items: center;
          gap: 6px;

          i {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}

.pagination-wrapper {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .main-card {
    padding: 24px 16px;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .history-list {
    .history-item {
      padding: 12px;

      .history-info {
        .details {
          flex-direction: column;
          gap: 8px;
        }
      }
    }
  }
}
</style>
